import BpmnModeler from 'bpmn-js/lib/Modeler'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
import { getProgressModel, updateProgressModel } from '@/api/model'

export default {
  data () {
    return {
      xmlData: '',
      progressModel: null,
      bpmnModeler: null,
      container: null,
      canvas: null
    }
  },
  created () {
    this.setInitData()
  },
  methods: {
    setInitData () {
      // 现获取模型数据，再打开模拟器
      const thisModelId = this.$route.query.modelId
      getProgressModel({
        modelId: thisModelId
      }).then(response => {
        // 获取到模型，允许修改
        if (response.code == 20000) {
          this.progressModel = response.data
	    			this.xmlData = this.progressModel.xmlData
        }
        this.setModeler()
	        }).catch(error => {
	        	// 未获取到模型，允许导出
	        	this.setModeler()
	        })
    },
    setModeler () {
      // 获取到属性ref为“content”的dom节点
      this.container = this.$refs.content
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 建模，官方文档这里讲的很详细
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        // 添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          // 左边工具栏以及节点
          propertiesProviderModule,
          // 右边的工具栏
          propertiesPanelModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })
      this.openDiagram(this.bpmnModeler)
    },
    saveDiagram () {
      const _this = this
      this.bpmnModeler.saveXML({
        format: true
      }, function (err, xml) {
        if (err && xml != null && xml != '') {
          return console.error('无法保存BPMN 2.0流程图', err)
        }
        updateProgressModel({
          modelId: _this.progressModel.modelId,
          xmlData: xml
        }).then(() => {
		            // 刷新模型列表数据
		            _this.$notify({
		              title: '成功',
		              message: '保存成功',
		              type: 'success',
		              duration: 2000
		            })
		        })
      })
    },
    exportDiagram () {
      console.log('点击保存BPMN流程图')
      this.bpmnModeler.saveXML({
        format: true
      }, function (err, xml) {
        if (err) {
          return console.error('无法保存BPMN 2.0流程图', err)
        }
        var a = document.createElement('a')
        a.setAttribute('href',
          'data:application/bpmn20-xml;charset=UTF-8,' + xml)
        a.setAttribute('download', 'my_bpmn.bpmn')
        a.click()
      })
    },
    openDiagram (bpmnModeler) {
      let bpmnXmlStr = ''
      if (this.xmlData == null || this.xmlData == '') {
        bpmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
				'<definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:signavio="http://www.signavio.com" id="sid-0b0aaa25-3baf-4875-9d7a-0907d599a9ef" targetNamespace="http://www.omg.org/spec/BPMN/20100524/MODEL" exporter="Camunda Modeler" exporterVersion="3.4.1" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
				'<dataStore id="init_bpmn" name="Financial Accounting System" isUnlimited="false">\n' +
				'<dataState id="DataState_1" />\n' +
				'</dataStore>\n' +
				'<message id="foxMessage_en" name="foxMessage_en" />\n' +
				'<process id="init_bpmn_id" name="init_bpmn_name" isExecutable="false">\n' +
				'<startEvent id="StartEvent_1awdmg3" />\n' +
	  			'</process>\n' +
	  			'<bpmndi:BPMNDiagram id="BPMNDiagram_73">\n' +
	    		'<bpmndi:BPMNPlane id="BPMNPlane_73" bpmnElement="init_bpmn_id">\n' +
	      		'<bpmndi:BPMNShape id="StartEvent_1awdmg3_di" bpmnElement="StartEvent_1awdmg3">\n' +
	       		'<dc:Bounds x="152" y="82" width="36" height="36" />\n' +
	      		'</bpmndi:BPMNShape>\n' +
	    		'</bpmndi:BPMNPlane>\n' +
	  			'</bpmndi:BPMNDiagram>\n' +
				'</definitions>\n'
      } else {
        bpmnXmlStr = this.xmlData
      }
      bpmnModeler.importXML(bpmnXmlStr, function (err) {
        if (err) {
          return console.error('无法导入BPMN 2.0流程图', err)
        }
        const canvas = bpmnModeler.get('canvas')
        canvas.zoom('fit-viewport')
        canvas.addMarker('init_bpmn_id')
      })
    }
  },
  mounted () {

  }
}
